import React from 'react';

const menus = [{
  icon: require('./../img/help/help_menu_book.png'),
  text: '白皮书下载'
}, {
  icon: require('./../img/help/help_menu_cat.png'),
  text: 'Cat下载'
}, {
  icon: require('./../img/help/help_menu_guide.png'),
  text: '操作手册下载'
}, {
  icon: require('./../img/help/help_menu_question.png'),
  text: '常见问题'
}, {
  icon: require('./../img/help/help_menu_service.png'),
  text: '全程服务'
}];

const HelpMenuItem = ({ icon, text }) => <div className='help-menu-item'>
  <img src={icon} alt='icon' />
  <p>{text}</p>
</div>

const HelpMenu = () => {
  return (
    <div className='web-page-block help-menu'>
      <div className='web-page-block-content'>
        {
          menus.map((item, index) => <HelpMenuItem key={index} {...item} />)
        }
      </div>
    </div>
  );
}

export default HelpMenu;